import React from "react";
// import './Error.css';

function Error() {
  return (
    <div className="error-page">
      {/* 第一个数字4 */}
      <div className="digit">
        🌹🌹🌹
        <br />
        🌹&nbsp;&nbsp;&nbsp;
        <br />
        🌹🌹🌹
        <br />
        🌹&nbsp;&nbsp;&nbsp;
        <br />
        🌹&nbsp;&nbsp;&nbsp;
      </div>

      {/* 数字0 */}
      <div className="digit">
        &nbsp;🌹🌹&nbsp;
        <br />
        🌹&nbsp;&nbsp;🌹
        <br />
        🌹&nbsp;&nbsp;🌹
        <br />
        🌹&nbsp;&nbsp;🌹
        <br />
        &nbsp;🌹🌹&nbsp;
      </div>

      {/* 第二个数字4 */}
      <div className="digit">
        🌹🌹🌹
        <br />
        🌹&nbsp;&nbsp;&nbsp;
        <br />
        🌹🌹🌹
        <br />
        🌹&nbsp;&nbsp;&nbsp;
        <br />
        🌹&nbsp;&nbsp;&nbsp;
      </div>
    </div>
  );
}

// 样式（可放到Error.css里）
const style = `
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /* 数字之间的间距 */
  background: #fff0f3; /* 浅粉色背景更搭玫瑰 */
  margin: 0;
  padding: 20px;
}

.digit {
  font-size: 32px; /* 控制玫瑰大小 */
  line-height: 1; /* 紧凑排列让形状更准 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 轻微阴影增强立体感 */
}
`;

// 动态插入样式（无需单独CSS文件时使用）
const styleElement = document.createElement("style");
styleElement.innerHTML = style;
document.head.appendChild(styleElement);

export default Error;
